import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import Taro from '@tarojs/taro';
import { View, Image, Input } from '@tarojs/components';
import TheButton from '@/components/Button/index';
import pGo from '@/images/common/rightGray.png';
import './index.scss';

const LogisticsInput = ({ dispatch, logisticsCompanySelected = {}, adjustmentDetail = {} }) => {
  const [logisticsNum, setLogisticsNum] = useState('');

  const goLogisticsCompany = () => {
    Taro.navigateTo({ url: '/orderSubPack/afterSale/logisticsCompany/index' });
  };

  useEffect(() => {
    if (adjustmentDetail.logisticsNumBuyer) {
      setLogisticsNum(adjustmentDetail.logisticsNumBuyer);
    }
    if (adjustmentDetail.logisticsComBuyer || adjustmentDetail.logisticsNameBuyer) {
      dispatch({
        type: 'otherApi/setSelectedLogisticsCompany',
        payload: {
          com: adjustmentDetail.logisticsComBuyer || '',
          name: adjustmentDetail.logisticsNameBuyer || '',
        },
      });
    }
  }, []);

  const handleSubmit = () => {
    if (adjustmentDetail.logisticsIdBuyer) {
      //修改物流
      dispatch({
        type: 'otherApi/modifyLogisticsInfo',
        payload: {
          logisticsCom: logisticsCompanySelected.com,
          logisticsName: logisticsCompanySelected.name,
          logisticsNum: logisticsNum,
          adjustmentLogisticsRelationId: adjustmentDetail.logisticsIdBuyer,
        },
      }).then(() => Taro.navigateBack());
    } else {
      //新增物流
      dispatch({
        type: 'otherApi/addLogisticsInfo',
        payload: {
          logisticsCom: logisticsCompanySelected.com,
          logisticsName: logisticsCompanySelected.name,
          logisticsNum: logisticsNum,
          orderAdjustId: adjustmentDetail.id,
          type: 1,
        },
      }).then(() => Taro.navigateBack());
    }

    dispatch({
      type: 'otherApi/setSelectedLogisticsCompany',
      payload: {},
    });
  };

  let contactAddress = JSON.parse(adjustmentDetail.contactAddress || '{}');

  return (
    <View className="flex-column--center logisticsInput">
      <View className=" txt28 black085 logistics box2">
        <View className="txt32 black085 blod">物流信息</View>
        <View className="flex-row-spaceBetween-center mt24">
          <View>物流公司</View>
          <View className="flex-row-spaceBetween-center" onClick={() => goLogisticsCompany()}>
            <View className={logisticsCompanySelected.name?.length > 0 ? '' : 'gray'}>
              {logisticsCompanySelected.name || '请选择'}
            </View>
            <Image className="arrow" src={pGo} />
          </View>
        </View>
        <View className="flex-row-spaceBetween-center mt34">
          <View>快递单号</View>
          <Input
            className="code-input"
            placeholder="请输入"
            placeholderClass="inputPlaceholder"
            value={logisticsNum}
            onInput={(e) => {
              setLogisticsNum(e.detail.value);
            }}
          />
        </View>
        <View className="flex-row-spaceBetween-center mt34">
          <View>联系电话</View>
          <View>{contactAddress?.contact_mobile || ''}</View>
        </View>
      </View>
      <View className="flex-row-center opArea">
        <TheButton
          txt="提交"
          handleOp={handleSubmit}
          disabled={
            logisticsNum.length > 0 && logisticsCompanySelected.com !== undefined ? false : true
          }
        />
      </View>
    </View>
  );
};

export default connect(({ otherApi, order }) => ({
  logisticsCompanySelected: otherApi.logisticsCompanySelected,
  adjustmentDetail: order.adjustmentDetail,
}))(LogisticsInput);
